<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				margin: 50px auto;
			}
			.header{
				display: flex;
			}
			.header div{
				width: 40px;
				height: 20px;
				overflow: hidden;
				position:relative;
			}
			div img{
				position: absolute;
				top: -29px;
			}
			#alert{
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">
				<div><img src="img/star.png-1016.png"/></div>
				<div><img src="img/star.png-1016.png"/></div>
				<div><img src="img/star.png-1016.png"/></div>
				<div><img src="img/star.png-1016.png"/></div>
				<div><img src="img/star.png-1016.png"/></div>
			</div>
			<div id="alert"></div>
		</div>
		<script type="text/javascript">
			var imgs = document.querySelectorAll("img");
			var tishi = document.getElementById("alert");
			for(let i=0; i<imgs.length; i++){
				imgs[i].onclick = function(){
					for(var j=0; j<imgs.length; j++){
						imgs[j].style.top = "-29px";
					}
					for (let a=0; a<=i; a++) {
						imgs[a].style.top = "-9px"
					}
					tishi.innerHTML = i+1 + "颗星"
				}
			}
		</script>
	</body>
</html>
